<!-- 个人中心小组件 -->
<template>
  <a-card hoverable style="width: 300px" class="personal-center-wrapper">
 <template #cover>
   <img
     alt="个人中心背景图"
     src="../assets/image/personalCenterBackground.jpg"
   />
 </template>
 <template #actions>
   <setting-outlined key="setting" />
   <edit-outlined key="edit" />
   <ellipsis-outlined key="ellipsis" />
 </template>
 <a-card-meta :title="props.userInfo.nickname" description="这是一段描述">
     <!-- 用户头像 -->
      <template #avatar>
        <img src="../assets/image/profile.jpeg" style="width: 64px; height: 64px; object-fit: cover; border-radius: 50%;"/>
      </template>
 </a-card-meta>
</a-card>
</template>
<script setup>
import { onMounted } from 'vue';


const props=defineProps({
 userInfo:{
     type:Object,
     required:true
 }
});
onMounted(()=>{
console.log(props.userInfo);
})
</script>
<style lang="css" scoped>
.personal-center-wrapper {
position: absolute;
/* 将弹出组件定位到按钮下方 */
top: 100%; 
right: 0;
/* 可根据需要设置弹出组件的样式 */
background-color: white;
border: 1px solid #ccc;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 10px;
z-index: 1;
}

</style>